<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 常用布局
       1、静态布局： px作为单位
       2、流式布局：网格布局，%作为单位 
       3、自适应布局： @media 媒体查询
       4、响应式布局： 媒体查询+流式布局+静态布局  （适配多端）
       5、rem/em布局: 
       6、弹性布局:flex
       7、圣杯布局（双飞翼布局）：左右固定，中间自适应
    -->
</body>

</html>